<template>
	<view class="appeal">
		<template v-if="state">
		<view class="appeal-title" v-if="listData.data.length">
			<uni-card :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'20rpx 40rpx'" :padding="'0'" v-for="item in listData.data" :key="item.id">
			   <view class="a-t-title">
					<view class="a-t-t-top">
						<text class="t-text">{{item.hotel_name || ''}}</text>
						<view class="n-tag">
							<uni-tag :text="item.type"></uni-tag>
						</view>
					</view>
					<view class="a-t-km">
						<view class="a-t-name">
							<text class="n-text">{{item.content || ''}}</text>
							<text class="k-text">{{item.create_time || ''}}</text>
							<view class="a-t-n-text" v-if="item.platform_opinion">
								<text slot="header" class="slot-hf">平台回复：</text>
								<text slot="body" class="slot-hf text">{{item.platform_opinion || ''}}</text>
							</view>
						</view>
					</view>
			   </view>
			   <view class="a-t-box">
					<button v-if="item.appeal == 0" class="but" type="default" @click="onClick(item.id)">立即申诉</button>
					<image class="k-t-img" v-if="item.appeal == 1" :src="shz" ></image>
					<image class="k-t-img" v-if="item.appeal == 2" :src="ytg" ></image>
					<image class="k-t-img" v-if="item.appeal == 3" :src="wtg" ></image>
			   </view>
			   
			</uni-card>
			<uni-load-more v-if="listData.data.length" :contentText="contentText" :status="status" @clickLoadMore="loadClick()"></uni-load-more>
		</view>
		</template>
		<view style="width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;flex: 1;" v-else>
			<image :src="zanwudingdan" mode="widthFix" style="width: 360rpx;"></image>
			<text style="font-size: 32rpx;font-weight: 500;color: #777777;margin: 50rpx 0 150rpx;">暂无数据!</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				state:true,
				zanwudingdan:`${getApp().globalData.imgScr}bj/zanwudingdan.png`,
				shz:`${getApp().globalData.imgScr}bj/shz.png`,
				ytg:`${getApp().globalData.imgScr}bj/ytg.png`,
				wtg:`${getApp().globalData.imgScr}bj/wtg.png`,
				listData:{
					data:[], // 请求回的列表数据
					page:1, // 初始页码
					total:0, // 数据总条数
					more:'more', // 加载更多组件的状态  more：加载前 loading：加载中 noMore：没有更多数据
				},
				contentText: { // 加载状态对应的提示语
					contentdown: '点击加载更多数据',
					contentrefresh: '正在加载中...',
					contentnomore: '没有更多数据'
				},
				};
		},
		onShow() { 
			this.getData()
		    },
		onPullDownRefresh() {
			let _this = this
		        setTimeout(function () {
					uni.showToast({
						title:"刷新成功",
						icon:"none"
					})
					// 恢复初始状态
					Object.assign(_this.listData, _this.$options.data().listData)
					_this.getData()
		            uni.stopPullDownRefresh();
		        }, 1000);
		    },
		methods:{
			/**
			 * 违规申诉按钮
			 * @param {string} id 当前卡片的id
			 */
			onClick(id) {
				uni.navigateTo({
					url: `/cleaningAdmin/my-wallet/appeal/set-appeal/set-appeal?id=${id}`
				});
			},
			/**
			 * 点击加载更多组件时触发
			 * @param {Object} e 点击时的状态
			 */
			loadClick(e) {
				if(e.detail.status == 'no-more') return this.listData.data.more = "no-more"
			},
			/**
			 * 获取数据
			 * @param {number} page 请求的页码
			 * @param {number} limit 请求的数据数量
			 */
			async getData(page = 1,limit = 10) {
				try{
					let res = await this.$http.post('/index/Cleanerindex/complaint_list',{
						page,
						limit
					})
					this.listData.data = res.data
					this.state = res.total
				}catch(e){
					this.state = false
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.appeal {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
		height: 100vh;
		.uni-card {
			border-radius: 20rpx;
			.uni-card__content {
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
			}
		}
		.appeal-title {
			flex: 1;
			margin: 20rpx;
			overflow: auto;
			.a-t-title {
				flex: 1;
				display: flex;
				flex-direction: column;
				.a-t-t-top {
					display: flex;
					align-items: center;
					.t-text {
						font-size: 28rpx;
						font-weight: 600;
						color: #333333;
						margin-right: 20rpx;
					}
					.n-tag {
						.uni-tag {
							width: 80rpx;
							height: 30rpx;
							font-size: 20rpx;
							font-weight: 500;
							color: #53E38C;
							border: 0;
							border-radius: 15rpx;
							background-color: rgba($color: #53E38C, $alpha: 0.1);
						}
					}
				}
				.a-t-km {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.a-t-name {
						flex: 1;
						display: flex;
						flex-direction: column;
						.k-text {
							font-size: 24rpx;
							font-weight: 600;
							color: rgba($color: #000000, $alpha: 0.7);
						}
						.n-text {
							font-size: 24rpx;
							font-weight: 600;
							color: rgba($color: #000000, $alpha: 0.7);
							margin-bottom: 10rpx;
						}
						.a-t-n-text {
							display: flex;
							.slot-hf {
								font-size: 24rpx;
								font-weight: 500;
								color: #8dc9f1;
								margin-right: 20rpx;
							}
							.text {
								flex: 1;
								margin-right: 0;
							}
						}
						
					}
				}
			}
			.a-t-box {
				.but {
					box-sizing: border-box;
					line-height: 50rpx;
					border-radius: 25rpx;
					background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
					border: 1rpx solid #d8eefc;
					font-size: 24rpx;
					font-weight: 500;
					color: #FFFFFF;
					margin: 0;
				}
				.k-t-img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50rpx;
					overflow: hidden;
					opacity: 0.4;
				}
			}
			
			
			.a-t-tel {
				.tel-text {
					font-size: 24rpx;
					font-weight: 600;
					color: rgba($color: #000000, $alpha: 0.7);
				}
			}
		}
		.butt {
			box-sizing: border-box;
			width: 100%;
			padding: 0 32rpx;
			margin: 32rpx 0;
			.but {
				line-height: 80rpx;
				border-radius: 40rpx;
				background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
	}
</style>
